<template>
  <view class="container">
    <u-navbar
      title="立即下单"
      :autoBack="true"
      :fixed="true"
      :bgColor="'#ffffff'"
      :placeholder="true"
      :titleStyle="{
        color: '#333',
        fontSize: '16px',
      }"></u-navbar>

    <!-- 表单内容 -->
    <view class="form-content">
      <view class="title">
        <view class="line"></view>
        地址信息
      </view>
      <!-- 区域 -->
      <view class="form-item arrow" @click="selectArea">
        <text class="label required">区/县:</text>
        <input
          class="input"
          v-model="form.area"
          placeholder="选择区/县"
          placeholder-style="color: #999"
          disabled />
        <!-- <view class="value">{{ form.area || "区域" }}</view> -->
        <u-icon name="arrow-right" color="#999" size="16"></u-icon>
      </view>
      <u-picker
        :show="showArea"
        :columns="columnsArea"
        @cancel="cancelArea"
        @confirm="confirmArea"
        keyName="name"></u-picker>

      <view class="form-item arrow" @click="selectHouseType">
        <text class="label required">街道</text>
        <input
          class="input"
          v-model="form.street"
          placeholder="请选择街道"
          disabled
          placeholder-style="color: #999" />

        <u-icon name="arrow-right" color="#999" size="16"></u-icon>
      </view>
      <u-picker
        :show="showHouseType"
        :columns="columnsHouseType"
        @cancel="cancelHouseType"
        @confirm="confirmHouseType"
        keyName="name"></u-picker>

      <view class="form-item arrow" @click="selectContractType">
        <text class="label required">村</text>
        <input
          class="input"
          v-model="form.address"
          placeholder="请选择村"
          disabled
          placeholder-style="color: #999" />

        <u-icon name="arrow-right" color="#999" size="16"></u-icon>
      </view>
      <view class="form-item">
        <text class="label required">详细地址:</text>
        <input
          class="input"
          type="text"
          v-model="form.address2"
          placeholder="请输入详细地址"
          placeholder-style="color: #999" />
      </view>
      <u-picker
        :show="showContractType"
        :columns="columnsContractType"
        @cancel="cancelContractType"
        @confirm="confirmContractType"
        keyName="name"></u-picker>
    </view>
    <view class="form-content">
      <view class="title">
        <view class="line"></view>
        用户信息
      </view>
      <view class="form-item">
        <text class="label required">用户姓名:</text>
        <input
          class="input"
          type="text"
          v-model="form.name"
          placeholder="请输入用户姓名"
          placeholder-style="color: #999" />
      </view>
      <view class="form-item">
        <text class="label required">手机号:</text>
        <input
          class="input"
          type="number"
          v-model="form.mobile"
          placeholder="请输入手机号"
          placeholder-style="color: #999" />
      </view>
      <view class="form-item">
        <text class="label required">身份证号:</text>
        <input
          class="input"
          type="number"
          v-model="form.cardid"
          placeholder="请输入身份证号"
          placeholder-style="color: #999" />
      </view>
      <view class="form-item">
        <text class="label">备注:</text>
      </view>
      <view
        class=""
        style="border: #999 solid 1px; border-radius: 10rpx; padding: 10rpx">
        <textarea
          v-model="form.remark"
          placeholder="请输入信息"
          placeholder-style="color: #999"></textarea>
      </view>
    </view>
    <view class="form-content">
      <view class="title">
        <view class="line"></view>
        身份证图片
        <view style="color: #ff5a5f">*</view>
      </view>

      <!-- 图片上传 -->
      <view class="upload-section">
        <view class="upload-content">
          <u-upload
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            multiple
            width="150"
            height="94"
            :maxCount="1">
            <view class="upload-item">
              <image
                src="/static/index/cardz.png"
                mode="widthFix"
                style="width: 150px; height: 94px"></image>
              <text>身份证人像面</text>
            </view>
          </u-upload>
        </view>
        <view class="upload-content">
          <u-upload
            :fileList="fileList2"
            @afterRead="afterRead2"
            @delete="deletePic2"
            name="2"
            multiple
            width="150"
            height="94"
            :maxCount="1">
            <view class="upload-item">
              <image
                src="/static/index/cardz.png"
                mode="widthFix"
                style="width: 150px; height: 94px"></image>
              <text>身份证国徽面</text>
            </view>
          </u-upload>
        </view>
      </view>

      <view class="hite">
        备注：商户身份信息是应国家法律法规及监管规定要求上传仅用于开通收款及相关服务。
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit" @click="handleSubmit">提交</view>
  </view>
</template>

<script>
import {
  awayOrder,
  getarealist,
  getquList,
  getjiedaoList,
  getcunList,
} from "@/api/mainapi.js";
const d = new Date();
const year = d.getFullYear();
console.log(year);
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate();
export default {
  props: ["type"],
  data() {
    return {
      isAgree: false,
      inAnimation: {
        dou: false,
      },
      maxDate: "2099-12-31", // 确保日期格式正确
      minDate: `${year}-${month}-${date}`,
      tabs: ["房屋转租", "便民广告", "商家优惠"],
      video_icon: this.$Config.HTTP_REQUEST_URL + "/img/icon30.png",
      currentTab: 0,
      form: {
        area: "",
        street: "",
        address: "",
        address: "",
        address2: "",
        remark: "",
        mobile: "",
        name: "",
        cardid: "",
        area: "",
        jiedao_id: "",
        qu_id: "",
        village_id: "",
      },
      fileList: [],
      tags: [
        "更换无线路由器，安排上门调试服务",
        "免网费",
        "交通便利",
        "公寓",
        "民房",
        "民用水电",
      ],
      showCalendar: false,
      showHouseType: false,
      showContractType: false,
      showType: false,
      showArea: false,
      columnsHouseType: [
        [
          {
            text: "单间",
            id: "1",
          },
          {
            text: "标间",
            id: "2",
          },
          {
            text: "一室一厅",
            id: "3",
          },
        ],
      ],
      columnsContractType: [
        [
          {
            text: "重签合同",
            id: "1",
          },
          {
            text: "首次签合同",
            id: "2",
          },
          {
            text: "续签合同",
            id: "3",
          },
        ],
      ],
      columnsType: [
        [
          {
            text: "整租",
            id: "1",
          },
          {
            text: "合租",
            id: "2",
          },
          {
            text: "短租",
            id: "3",
          },
        ],
      ],
      columnsArea: [
        [
          {
            text: "区域1",
            id: "1",
          },
          {
            text: "区域2",
            id: "2",
          },
          {
            text: "区域3",
            id: "3",
          },
        ],
      ],
      tagshow: false,
      tagvalue: "",
      fileList1: [],
      fileList2: [],
      videoUrl: "",
      taocan_id: "",
    };
  },
  mounted() {},
  onLoad(param) {
    let item = JSON.parse(param.id);
    this.taocan_id = item;
    this.getArea();
    // this.getGent();
    // this.getCun();
  },
  methods: {
    // async getArea() {
    //   const res = await getarealist();
    //   if (res.response.statusCode === 200) {
    //     const vueReactiveArray = res.data.data.map((key) => {
    //       console.log(key);
    //       return {
    //         id: key.areaid,
    //         name: key.arearname,
    //       };
    //     });
    //     this.columnsArea[0] = vueReactiveArray;
    //   }
    // },
    async getArea() {
      const res = await getquList();
      if (res.response.statusCode === 200) {
        this.columnsArea = [res.data.data];
      }
    },
    async getGent(v) {
      const res = await getjiedaoList({
        qu_id: v,
      });
      if (res.response.statusCode === 200) {
        this.columnsHouseType = [res.data.data];
      }
    },
    async getCun(v) {
      const res = await getcunList({
        jiedao_id: v,
      });
      if (res.response.statusCode === 200) {
        this.columnsContractType = [res.data.data];
      }
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.fullurl,
          })
        );
        fileListLen++;
      }
    }, // 删除视频
    deletePic2() {
      this.fileList2.splice(0, 1);
      this.videoUrl = "";
    },
    // 新增图片
    async afterRead2(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise2(lists[i].url);
        this.videoUrl = result.fullurl;
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.fullurl,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise2(url) {
      console.log(url, 234234);
      return new Promise((resolve, reject) => {
        const token = uni.getStorageSync("userInfo").token;
        uni.uploadFile({
          url: this.$Config.HTTP_REQUEST_URL + "/api/common/upload2",
          fileType: "all",
          name: "file",
          filePath: url,
          header: {
            token: token,
          },
          success: (res) => {
            console.log(res.data, JSON.parse(res.data).data);
            setTimeout(() => {
              resolve(JSON.parse(res.data).data);
            }, 1000);
          },
        });
      });
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        const token = uni.getStorageSync("userInfo").token;
        uni.compressImage({
          src: url,
          quality: 50,
          success: (chooseImageRes) => {
            uni.uploadFile({
              url: this.$Config.HTTP_REQUEST_URL + "/api/common/upload2",
              fileType: "all",
              name: "file",
              filePath: chooseImageRes.tempFilePath,
              header: {
                token: token,
              },
              success: (res) => {
                setTimeout(() => {
                  resolve(JSON.parse(res.data).data);
                }, 1000);
              },
            });
          },
        });
      });
    },

    switchTab(index) {
      this.currentTab = index;
    },
    selectHouseType() {
      // 选择街道
      this.showHouseType = true;
    },
    selectContractType() {
      // 选择村
      this.showContractType = true;
    },
    selectType() {
      // 选择类型
      this.showType = true;
    },
    selectArea() {
      // 选择区域
      this.showArea = true;
    },
    cancelHouseType() {
      this.showHouseType = false;
    },
    confirmHouseType(e) {
      console.log(e);
      this.showHouseType = false;
      this.form.street = e.value[0].name;
      this.form.jiedao_id = e.value[0].id;
      this.form.address = "";
      this.getCun(this.form.jiedao_id);
    },
    cancelContractType() {
      this.showContractType = false;
    },
    confirmContractType(e) {
      this.showContractType = false;
      this.form.address = e.value[0].name;
      this.form.village_id = e.value[0].id;
    },
    cancelType() {
      this.showType = false;
    },
    confirmType(e) {
      this.showType = false;
      this.form.type = e.value[0].text;
      this.form.typeId = e.value[0].id;
    },
    cancelArea() {
      this.showArea = false;
    },
    confirmArea(e) {
      this.showArea = false;
      this.form.area = e.value[0].name;
      this.form.qu_id = e.value[0].id;
      this.form.street = "";
      this.form.address = "";
      this.getGent(this.form.qu_id);
    },
    confirmCalendar(date) {
      this.form.expireDate = date;
      this.showCalendar = false;
    },

    async handleSubmit() {
      // 提交表单

      if (this.form.area == "") {
        return uni.showToast({
          title: "请选择区",
          icon: "none",
          duration: 2000,
        });
      }
      if (this.form.street == "") {
        return uni.showToast({
          title: "请选择街道",
          icon: "none",
          duration: 2000,
        });
      }
      if (this.form.address == "") {
        return uni.showToast({
          title: "请选择村",
          icon: "none",
          duration: 2000,
        });
      }
      if (this.form.address2 == "") {
        return uni.showToast({
          title: "请输入详细地址",
          icon: "none",
          duration: 2000,
        });
      }
      if (this.form.name == "") {
        return uni.showToast({
          title: "请输入用户名",
          icon: "none",
          duration: 2000,
        });
      }
      if (this.form.mobile == "") {
        return uni.showToast({
          title: "请输入手机号",
          icon: "none",
          duration: 2000,
        });
      }
      if (this.form.cardid == "") {
        return uni.showToast({
          title: "请输入身份证",
          icon: "none",
          duration: 2000,
        });
      }
      var contcatarr = this.fileList1;
      var contcatarr2 = this.fileList2;
      console.log("提交表单", this.form, this.fileList1, this.fileList2);
      var arr = [],
        arr2 = [];
      contcatarr.forEach((element, index) => {
        arr.push(element.url);
      });
      contcatarr2.forEach((element, index) => {
        arr2.push(element.url);
      });
      if (arr.length == 0) {
        return uni.showToast({
          title: "请上传身份证人像面",
          icon: "none",
          duration: 2000,
        });
      }
      if (arr2.length == 0) {
        return uni.showToast({
          title: "请上传身份证国徽面",
          icon: "none",
          duration: 2000,
        });
      }
      console.log(arr.join(","));
      const res = await awayOrder({
        select_area: this.form.area,
        address: this.form.address,
        address2: this.form.address2,
        name: this.form.name,
        mobile: this.form.mobile,
        remark: this.form.remark,
        zheng_image: arr.join(","),
        fan_image: arr2.join(","),
        taocan_id: this.taocan_id,
        cardid: this.form.cardid,
        qu_id: this.form.qu_id,
        jiedao_id: this.form.jiedao_id,
        village_id: this.form.village_id,
      });
      if (res.response.data.code === 1) {
        uni.showToast({
          title: "提交成功",
          icon: "none",
          duration: 2000,
        });

        Object.keys(this.form).forEach((key) => {
          this.form[key] = "";
        });
        arr = [];
        this.fileList1 = [];
        this.fileList2 = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f6fa;
  padding-bottom: constant(safe-area-inset-bottom);
  /* iOS 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* iOS 11.2 */
}

.publish-tip {
  display: flex;
  padding: 20rpx 24rpx;
  font-size: 24rpx;
  color: #999;
  .num {
    color: #ff0000;
  }
}

.form-content {
  width: 92%;
  margin-left: 4%;
  padding: 20rpx 24rpx;
  // height: 778rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1),
    inset 0rpx 0rpx 0rpx 2rpx #ffffff;
  border-radius: 28rpx;
  margin-top: 20rpx;
  box-sizing: border-box;
  .title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 32rpx;
    color: #323334;
    .line {
      width: 8rpx;
      height: 32rpx;
      background: #49a1fd;
      margin-right: 10rpx;
    }
  }
  .form-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;

    &.arrow {
      padding-right: 24rpx;
    }

    .label {
      font-size: 28rpx;
      color: #333;
      margin-right: 24rpx;

      &.required::before {
        content: "*";
        color: #ff5a5f;
        margin-right: 4rpx;
      }
    }

    .input {
      flex: 1;
      font-size: 28rpx;
      text-align: right;
    }

    .unit {
      font-size: 28rpx;
      color: #999;
      margin-left: 16rpx;
    }

    .value {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      text-align: right;

      &.location {
        color: #2979ff;
      }
    }

    &.textarea {
      padding: 24rpx;
      align-items: flex-start;

      textarea {
        width: 100%;
        height: 200rpx;
        font-size: 28rpx;
      }
    }
  }
}
.hite {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #fb2525;
}
.submit {
  width: 92%;
  height: 88rpx;
  margin-left: 4%;
  margin-top: 40rpx;
  background: linear-gradient(142deg, #0ca8fd 0%, #4272fa 100%);
  border-radius: 16rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
}
.upload-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  display: flex;
  .upload-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
  }

  .upload-tip {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 24rpx;
  }

  .upload-content {
    display: flex;
    // flex-wrap: wrap;
    // gap: 24rpx;

    .upload-item {
      width: 300rpx;
      height: 188rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      text {
        font-size: 24rpx;
        color: #000000;
        margin-top: 8rpx;
      }
    }
  }
}

.tags-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;

  .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-bottom: 24rpx;

    .tag-item {
      padding: 12rpx 24rpx;
      font-size: 24rpx;
      color: #666;
      background: #f5f5f5;
      border-radius: 4rpx;

      &.active {
        color: #2979ff;
        background: rgba(41, 121, 255, 0.1);
      }
    }
  }

  .add-tag {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #2979ff;

    text {
      margin-left: 8rpx;
    }
  }
}

.contact-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;

  .section-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 24rpx;
  }

  .form-item {
    background: none;
    padding: 16rpx 0;
    margin-bottom: 0;
    border-bottom: 2rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }
  }
}

.submit-btn {
  margin: 0 24rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #2979ff;
  border-radius: 44rpx;
  color: #fff;
  font-size: 32rpx;
}
.bottom-Box {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  margin-top: 45rpx;

  &.Anim {
    animation: move 0.1s ease-in-out alternate;
    animation-iteration-count: 5;
    /* 播放两次 */
  }

  .cercleNo {
    width: 30rpx;
    height: 30rpx;
    border-radius: 100%;
    border: 2rpx solid #49a1fd;
  }

  .cercleYes {
    width: 30rpx;
    height: 30rpx;
    border-radius: 100%;
    background-color: #49a1fd;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .yuedu {
    color: #333333;
    font-size: 28rpx;
    margin-left: 10rpx;
  }

  .yonghuxuzhi {
    color: #49a1fd;
    font-size: 28rpx;
  }

  .yinsizhengce {
    color: #49a1fd;
    font-size: 28rpx;
  }
}
</style>
